<template>
  <div id="resume">
    <!-- 导航栏 -->
    <div class="header dark">
      <div class="logo">MINE</div>
      <div class="menu">
        <div class="menu-item" @click="menuClick(1)">首页</div>
        <div class="menu-item" @click="menuClick(2)">个人简介</div>
        <div class="menu-item" @click="menuClick(3)">个人经历</div>
        <div class="menu-item" @click="menuClick(4)">专业技能</div>
        <div class="menu-item" @click="menuClick(5)">留言</div>
      </div>
    </div>
    <!-- 首页 -->
    <div class="home">
      <div class="home_box">
        <div class="image">
          <img
            src="../../image/touxiang.jpeg"
            style="
              width: 100px;
              height: 100px;
              margin: 2px auto;
              border-radius: 50%;
            "
            alt=""
            srcset=""
          />
        </div>
        <div class="name">MINE</div>
        <div class="info">心无所恃，随遇而安，知足常乐，开心就好</div>
      </div>
    </div>
    <!-- 个人简介 -->
    <div class="profile">
      <div class="profile_header"><span>个人简介</span></div>
      <div class="profile_container">
        <div class="profile_image">
          <img src="../../image/img1.jpg" alt="" srcset="" />
        </div>
        <div class="profile_info">
          <div class="txt1">基本信息和自我介绍</div>
          <div class="txt2">
            武汉理工大学计算机专业在读研究生，喜欢折腾，激发天马行空的创造力，创造无限可能。
          </div>
          <div class="txt3">
            <p>暂时不知道写什么</p>
            <p>先空着吧</p>
            <p>不然挺奇怪的</p>
            <p>就这样</p>
            
          </div>
          <div class="info_detail">
            <div class="info_item">
              <span class="info_item_title">中文名：</span>
              <span class="info_item_value">王超</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">外文名：</span>
              <span class="info_item_value">mine</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">年龄：</span>
              <span class="info_item_value">23</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">现居城市：</span>
              <span class="info_item_value">湖北武汉</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">故乡：</span>
              <span class="info_item_value">湖北天门</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">毕业学校：</span>
              <span class="info_item_value">武汉理工大学</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">邮箱：</span>
              <span class="info_item_value">1582787512@qq.com</span>
            </div>
            <div class="info_item">
              <span class="info_item_title">qq号：</span>
              <span class="info_item_value">1582787512</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 个人经历 -->
    <div id="exp">
      <div class="exp_header"><span>个人经历</span></div>
      <div class="exp_container">
        <el-timeline>
          <el-timeline-item
            timestamp="2015/9/1-2019/5/30"
            placement="top"
            color="#0bbd87"
          >
            <el-card>
              <h4 style="margin: 0px 0 20px 0">
                湖北经济学院 本科 数字媒体技术专业
              </h4>
              <p>
                GPA:3.2
                主修课程：数据结构、计算机网络、操作系统、计算机组成原理、java、c语言程序设计、数字媒体技术、网页开发
              </p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2019/5/30-2019/8/30" placement="top">
            <el-card>
              <h4 style="margin: 0px 0 20px 0">
                深圳智扬信达技术有限公司 前端开发工程师
              </h4>
              <p>主要是使用vue全家桶进行h5视图开发</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2020/1/1-2020/4/20" placement="top">
            <el-card>
              <h4 style="margin: 0px 0 20px 0">
                武汉东方赛思技术有限公司 产品研发工程师
              </h4>
              <p>主要使用typescript对公司bi产品前端组件的开发与维护</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2020/9/1-" placement="top">
            <el-card>
              <h4 style="margin: 0px 0 20px 0">
                武汉理工大学 硕士 电子信息（专硕）
              </h4>
              <p>研究方向：数字签名</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 专业技能 -->
    <div id="skill">
      <div class="skill_header"><span>专业技能</span></div>
      <div class="skill_container">
        <div id="echartsBar"></div>
        <div id="echartsPie"></div>
      </div>
    </div>

    <!-- 留言和footer -->
    <div id="message">
      <div class="top">
        <div class="messageContent">
          <div
            style="
              font-size: 30px;
              font-weight: bold;
              border-bottom: 3px solid yellowgreen;
            "
          >
            留言板
          </div>
          <div class="messageContent-item">
            <div>昵称：</div>
            <el-input
              placeholder="请输入您的昵称"
              v-model="name"
              clearable
              style="width: 400px"
            >
            </el-input>
          </div>
          <div class="messageContent-item">
            <div>邮箱：</div>
            <el-input
              placeholder="请输入您的邮箱"
              v-model="email"
              clearable
              style="width: 400px"
            >
            </el-input>
          </div>
          <div class="messageContent-item">
            <div>内容：</div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入留言内容"
              v-model="textarea"
              style="width: 400px"
            >
            </el-input>
          </div>
          <div><el-button type="primary" @click="submit">提交</el-button></div>
        </div>
      </div>
      <div class="bottom">
        <div style="font-weight: bold; font-size: 20px; color: white">MINE</div>
        <div>© 2021 copyright all by me</div>
      </div>
    </div>
  </div>
</template>

<script>
import { insertMessage } from "../../api/interface";
import { formatDate } from "../../utils/basicUtil";
let _this = null;
const optionBar = {
  title: {
    text: "技术路线",
    subtext: "仅供参考",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
  },
  yAxis: {
    type: "category",
    data: ["html", "css", "js", "vue", "git", "java", "mysql"],
  },
  series: [
    {
      name: "程度",
      type: "bar",
      data: [95, 90, 80, 80, 80, 40, 30],
      itemStyle: {
        normal: {
          color: function (params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = [
              "#00BFFF",
              "#00FF7F",
              "#FFFF00",
              "#FF6347",
              "#FF00FF",
              "#48D1CC",
              "#ca8622",
            ];
            return colorList[params.dataIndex];
          },
          barBorderRadius: [0, 20, 20, 0],
          label: {
            show: true, //开启显示
            position: "right", //在上方显示
            textStyle: {
              //数值样式
              color: "black",
              fontSize: 16,
            },
            formatter: function (params) {
              return params.name;
            },
          },
        },
      },
    },
  ],
};
const optionPie = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "基础知识学习程度：",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "14",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 80, name: "数据结构" },
        { value: 70, name: "计算机网络" },
        { value: 80, name: "操作系统" },
        { value: 50, name: "计算机组成原理" },
        { value: 80, name: "算法与程序设计" },
      ],
    },
  ],
};
export default {
  data() {
    return {
      //header的dom
      headerDom: null,
      //留言板的信息
      name: "",
      email: "",
      textarea: "",
    };
  },
  created() {
    _this = this;
  },
  mounted() {
    this.headerDom = document.getElementsByClassName("header")[0];
    //监听滚动条的事件，用来触发动画
    window.onscroll = function (e) {
      /**浏览器的高度 */
      let winHeight = document.body.clientHeight;
      let scrolltop = document.documentElement.scrollTop;
      //动画显示个人简介 和  header的颜色变化
      if (scrolltop > winHeight / 2) {
        let dom = document.getElementsByClassName("profile_header")[0];
        dom.classList.add("animation2");
        dom.style.opacity = 1;
        dom = document.getElementsByClassName("profile_image")[0];
        dom.classList.add("animation2");
        dom.style.opacity = 1;
        dom = document.getElementsByClassName("profile_info")[0];
        dom.classList.add("animation1");
        dom.style.opacity = 1;

        _this.headerDom.classList.add("light");
        _this.headerDom.classList.remove("dark");
      } else {
        _this.headerDom.classList.add("dark");
        _this.headerDom.classList.remove("light");
      }
      //动态显示个人经历
      if (scrolltop > winHeight * 1.5) {
        let dom = document.getElementsByClassName("exp_container")[0];
        dom.classList.add("animation2");
        dom.style.opacity = 1;
      }
      //动态显示echarts
      if (scrolltop > winHeight * 2.9) {
        _this.initEchartsBar();
      }
    };
  },
  methods: {
    /**初始化echarts表格 */
    initEchartsBar() {
      let myChart = this.$echarts.init(document.getElementById("echartsBar"));
      myChart.setOption(optionBar);


      let myChart2 = this.$echarts.init(document.getElementById("echartsPie"));
      myChart2.setOption(optionPie);
      window.onresize = function(){
          myChart.resize();
          myChart2.resize();
          //myChart1.resize();    //若有多个图表变动，可多写
      }
    },
    /**点击头部导航菜单时触发 */
    menuClick(index) {
      window.scrollTo(0, document.body.clientHeight * (index - 1));
    },
    /**提交 */
    submit() {
      insertMessage({
        name: this.name,
        email: this.email,
        message: this.textarea,
        time: formatDate(new Date()),
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$notify({
              title: "提交成功",
              message: "感谢您的建议",
              type: "success",
            });
          } else {
            this.$notify({
              title: "提交失败",
              message: "请填写完整信息",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.$notify({
            title: "服务器错误",
            message: "",
            type: "error",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
#resume {
  width: 100%;
  height: 100%;
  position: relative;
}
.dark {
  background-color: rgba(245, 235, 235, 0);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.light {
  background-color: white;
  color: black;
  border-bottom: 1px solid rgb(233, 233, 233);
}
.header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0px;
  display: flex;
  align-items: center;
  z-index: 999;
  .logo {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    left: 160px;
    cursor: pointer;
  }
  .menu {
    font-size: 14px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 100px;
    .menu-item {
      width: 100px;
      text-align: center;
      cursor: pointer;
      margin-left: 10px;
    }
    .menu-item:hover {
      font-size: 18px;
      color: powderblue;
    }
  }
}
.home {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  background: url(../../image/top_bg.webp) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  .home_box {
    .image {
      display: flex;
      justify-content: center;
    }
    .name {
      text-align: center;
      font-size: 25px;
      font-weight: bold;
      margin-top: 25px;
      margin-bottom: 10px;
    }
    .info {
      text-align: center;
      font-size: 16px;
    }
  }
}
.profile {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 40px;
  .profile_header {
    margin: 0 auto;
    width: 70%;
    position: relative;
    top: 0px;
    left: 0px;
    opacity: 0;
    padding-top: 30px;
    span {
      display: block;
      border-bottom: 3px solid yellowgreen;
      width: 130px;
      font-size: 30px;
      text-align: center;
    }
  }
  .profile_container {
    margin: 0 auto;
    width: 70%;
    height: 80%;
    display: flex;
    .profile_image {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: 0px;
      left: 0px;
      opacity: 0;
      img {
        width: 80%;
      }
    }
    .profile_info {
      width: 70%;
      height: 100%;
      position: relative;
      top: 0px;
      left: 0px;
      opacity: 0;
      display: flex;
    flex-direction: column;
    justify-content: center;
      .txt1 {
        font-size: 22px;
        font-weight: bold;
      }
      .txt2 {
        font-size: 16px;
        font-weight: bold;
        margin: 30px 0 30px 0;
      }
      .txt3 {
        font-size: 16px;
        color: #828282;
        margin-bottom: 20px;
      }
      .info_detail {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .info_item {
          width: 48%;
          height: 40px;
          border-bottom: 1px solid rgb(233, 233, 233);
          display: flex;
          align-items: center;
          .info_item_title {
            color: black;
            font-weight: bold;
          }
          .info_item_value {
            margin-left: 10px;
            color: #828282;
          }
        }
      }
    }
  }
}
#exp {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f6f8fd;
  top: 0px;
  left: 0px;
  padding-top: 40px;
  .exp_header {
    margin: 0 auto;
    width: 70%;
    padding-top: 30px;
    margin-bottom: 20px;
    span {
      display: block;
      border-bottom: 3px solid yellowgreen;
      width: 130px;
      font-size: 30px;
      text-align: center;
    }
  }
  .exp_container {
    margin: 0 auto;
    opacity: 0;
    position: relative;
    top: 0px;
    left: 0px;
    width: 70%;
    height: 80%;
    background-color: white;
    padding: 40px 40px 0 40px;
  }
}
#skill {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0px;
  left: 0px;
  padding-top: 40px;
  .skill_header {
    margin: 0 auto;
    width: 70%;
    padding-top: 30px;
    margin-bottom: 20px;
    span {
      display: block;
      border-bottom: 3px solid yellowgreen;
      width: 130px;
      font-size: 30px;
      text-align: center;
    }
  }
  .skill_container {
    margin: 0 auto;
    width: 70%;
    height: 80%;
    background-color: white;
    padding: 40px 40px 0 40px;
    #echartsBar {
      width: 100%;
      height: 60%;
    }
    #echartsPie {
      width: 100%;
      height: 40%;
    }
  }
}
#message {
  width: 100%;
  height: 100%;
  background-color: #f6f8fd;
  .top {
    width: 70%;
    height: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .messageContent {
      width: 80%;
      height: 60%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .messageContent-item {
        display: flex;
        align-items: center;
        margin: 20px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 30%;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    color: gray;
    font-size: 14px;

    text-align: center;
  }
}

.animation1 {
  opacity: 1;
  animation: an1 1.5s linear;
}
@keyframes an1 {
  from {
    left: 0px;
    top: 500px;
    opacity: 0;
  }
  to {
    top: 0px;
    left: 0px;
    opacity: 1;
  }
}

.animation2 {
  opacity: 1;
  animation: an2 1s linear;
}
@keyframes an2 {
  from {
    left: 0px;
    top: -500px;
    opacity: 0;
  }
  to {
    top: 0px;
    left: 0px;
    opacity: 1;
  }
}
</style>